<template>
	<view class="game_library_page">
		
		<view class="re">
			<view class="banner_area_content">
				<view class="fs32 lh40 fwb cor_fff">HELLO，微信用户</view>
				<view class="fs24 lh40 cor_fff">
					<view class="">您共有<text class="fs32 fwb">1</text>款心愿游戏，</view>
					<view class="">总价值约<text class="fs32 fwb">243</text>元</view>
				</view>
				<view class="search_game_box">
					<image src="@/static/images/icon_search_2.png" class="icon_search_pos"></image>
					<view class="">搜索感兴趣的游戏</view>
				</view>
			</view>
			<image src="@/static/images/icon_02.png" class="biao_pos"></image>
			<image src="@/static/images/banner_04.png" class="wp100" mode="widthFix"></image>
		</view>
		
		<view class="pt10">
			
			<view class="game_item_box flex_box" v-for="(item, index) in 6" :key="index">
				<view class="re"><image src="@/static/images/img_1.png" class="gema_pic_size"></image></view>
				<view class="item ov">
					<view class="df hp100 jcsb fldc">
						<view class="fs32 fwb lh40 cor_333 clamp_1">塞尔达 荒野之息</view>
						<view class="mt10 fs28 lh40 cor_999">
							<view class="">精品二手，超新卡带</view>
							<view class="">闪电发货，玩完包回收</view>
						</view>
						<view class="mt10 fs20 fwb lh40 cor_F52 df ">回收起价<view class="fs28">243元</view></view>
					</view>
				</view>
				<view class="close_game_item"><image src="@/static/images/icon_close.png" class="icon_close"></image></view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	
	.game_library_page {
		position: relative;
		padding: 60rpx 32rpx 0;
		min-height: 100vh;
		background: #fff;
		background-color: #fff;
		padding-bottom: calc(30rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		.biao_pos {
			position: absolute;
			right: 10rpx;
			bottom: 112rpx;
			width: 242rpx;
			height: 200rpx;
			z-index: 2;
		}
		.banner_area_content {
			position: absolute;
			top: 0;
			left: 0;
			padding: 35rpx 32rpx 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			overflow: hidden;
			.search_game_box {
				position: relative;
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: left;
				padding: 0 64rpx;
				font-size: 24rpx;
				color: #D8DDE8;
				background-color: #fff;
				border-radius: 36rpx;
				margin-top: 6rpx;
				.icon_search_pos {
					position: absolute;
					top: 50%;
					left: 24rpx;
					width: 32rpx;
					height: 32rpx;
					margin-top: -16rpx;
					vertical-align: middle;
					z-index: 2;
				}
			}
		}
		.game_item_box {
			position: relative;
			height: 214rpx;
			border-radius: 16rpx;
			background: #FFFAFA;
			border: 1px solid #F7F7F7;
			margin-top: 24rpx;
			.gema_pic_size {
				position: relative;
				width: 312rpx;
				height: 214rpx;
				object-fit: cover;
				margin-right: 20rpx;
			}
			.close_game_item {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 36rpx;
				height: 28rpx;
				background-color: rgba(245, 34, 15, .8);
				border-radius: 0 16rpx 0 4rpx;
				.icon_close {
					position: relative;
					width: 16rpx;
					height: 16rpx;
					vertical-align: middle;
				}
			}
		}
	}

</style>
